<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Sandbox</title>
  <style>
    body {
      padding: 0px;
      margin: 0px;
    }
  </style>
</head>

<body>
  <script type="text/javascript">
    window.onload = function () {
      if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
          history.pushState('newjibberish', null, null);
          // Handle the back (or forward) buttons here
          // Will NOT handle refresh, use onbeforeunload for this.
        };
      }
      else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
          if (!ignoreHashChange) {
            ignoreHashChange = true;
            window.location.hash = Math.random();
            // Detect and redirect change here
            // Works in older FF and IE9
            // * it does mess with your hash symbol (anchor?) pound sign
            // delimiter on the end of the URL
          }
          else {
            ignoreHashChange = false;
          }
        };
      }
    }
  </script>
  <div id="indigo-container"></div>
  <script type="text/javascript" src="scripts/sandbox-fastopt.js"></script>
  <script type="text/javascript">
    function pokeIndigo() {
      console.log("(JS) Poking indigo...");
      IndigoEventPort.poke();
    }

    function pokeBack() {
      console.log("(JS) Indigo poked me back!");
    }

    function pokeBackWithFeeling(foo) {
      console.log("(JS) Indigo poked me back with: " + foo);
      console.log(foo.name);
      console.log(foo.age);
    }

    var smaller = { width: 456, height: 256 };
    var bigger = { width: 640, height: 480 };

    var isNormalSize = true;

    function resizeTheGame() {
      var indigo = document.getElementById("indigo-container");

      if (isNormalSize) {
        isNormalSize = false;
        indigo.width = bigger.width;
        indigo.height = bigger.height;
      } else {
        isNormalSize = true;
        indigo.width = smaller.width;
        indigo.height = smaller.height;
      }
    }

    document.onfullscreenchange = function (event) {
      if (document.fullscreenElement) {
        indigo.width = innerWidth;
        indigo.height = innerHeight;
      } else {
        if (isNormalSize) {
          indigo.width = smaller.width;
          indigo.height = smaller.height;
        } else {
          indigo.width = bigger.width;
          indigo.height = bigger.height;
        }
      }
    };

    function fullscreenIndigo() {
      var indigo = document.getElementById("indigo-container");

      // indigo.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); //Chrome
      indigo.mozRequestFullScreen(); //Firefox
    }
  </script>
  <div>
    <input type="submit" onclick="pokeIndigo()" value="poke"></input>
    <input type="submit" onclick="resizeTheGame()" value="change size"></input>
    <input type="submit" onclick="fullscreenIndigo()" value="fullscreen"></input>
  </div>
</body>

</html>
